element plus的dialog组件如何实现不关闭窗口时正常操作其他区域Dom

2023-07-05 13:24| 来源: 网络整理| 查看: 265

前言

在项目中，有时需要实现在不关闭对话框的情况下，正常操作其他区域的Dom；

element plus的dialog组件的modal属性可以关闭灰色遮罩层, 但仍然无法操作其他区域的Dom;

原因

因为dialog除了model以外还存在着透明的遮罩层, 导致我们无法操作其他区域的Dom;

解决

可使用css3属性: pointer-events

pointer-events: none；元素及其后代元素将不会作为鼠标事件的对象。但是如果后代元素的pointer-events属性为其他值(如:auto)时，鼠标事件作用于这个后代元素;pointer-events: auto；可以响应鼠标事件;

代码

对话框内容

在你的点击事件中, 修改dialogVisible值, 显示对话框

dialogVisible=true

对话框渲染出来后,执行回调函数

// 穿透遮罩层 function handleOverlay() { //获取对话框Dom var overlay = document.querySelector('.is-draggable'); // 设置pointerEvents='auto',使对话框可以正常操作 overlay.style.pointerEvents = 'auto'; //通过对话框Dom获取遮罩层Dom,修改其pointerEvents = 'none',使其他区域可正常操作 //第一层遮罩层 var overlayFa = overlay.parentNode; overlayFa.style.pointerEvents = 'none'; //第二层遮罩层 var overlayGfa = overlay.parentNode.parentNode; overlayGfa.style.pointerEvents = 'none'; }

如果对你有帮助, 就请点一个赞吧

【本文地址】

公司简介

联系我们